<template>
   <div class="body">
        <div class="main">
           <Sign_in />
            <Sing_up />
            <Switch />
        </div>
    </div>

</template>

<script setup lang="ts">
import { ElLoading, ElMessage } from 'element-plus';
import { reactive } from 'vue';
import axios from 'axios'
import { useRouter } from 'vue-router';
import { set_token } from '@/utils/auth';
import Sign_in from './components/sign_in.vue'
import Sing_up from './components/sing_up.vue'
import Switch from './components/switch.vue'





//组合式api
const data = reactive<any>({
    account: '17673159434',
    password: '888888',
});

const router = useRouter();


const events = {
    logins() {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        axios.post(" http://localhost:5000/api/Login/Logins", {
            account: data.account,
            password: data.password
        }).then((res: any) => {
            loading.close();
            if (res.data.code === 0) {
                set_token(res.data.data);
                router.push('/');
            } else {
                ElMessage.error(res.message);
            }
        });
    }
}


</script>

<style scoped >
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
  }
 
.body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    background-color: #ecf0f3;
    color: #a0a5a8;
  }
  
.main {
    position: relative;
    width: 1000px;
    min-width: 1000px;
    min-height: 600px;
    height: 600px;
    padding: 25px;
    background-color: #ecf0f3;
    box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
    border-radius: 20px;
    overflow: hidden;
  }
  @media (max-width: 1200px) {
    .main {
      transform: scale(0.7);
    }
  }
  @media (max-width: 1000px) {
    .main {
      transform: scale(0.6);
    }
  }
  @media (max-width: 800px) {
    .main {
      transform: scale(0.5);
    }
  }
  @media (max-width: 600px) {
    .main {
      transform: scale(0.4);
    }
  }
</style>
